.content {
  @apply relative;
  height: calc(100vh - 2rem);
  min-height: 25rem;
  font-family: AlibabaPuHuiTi;
  overflow-y: auto !important;

  &.smallContent {
    .bg {
      .getScore {
        top: 28.096%;
        font-size: 1.5rem;
      }

      .getTips {
        @apply leading-4 mt-4;
        top: 38.831%;
        font-size: 1rem;
      }

      .convert {
        @apply text-xl bottom-5;
        width: 15rem;
        height: 3.125rem;
      }
    }

    .mores {
      @apply text-xl mt-8 mb-10;
      bottom: 20%;
    }

    .closeModal {
      @apply w-10 h-10;
    }
  }

  &.middleContent {
    .bg {
      .getScore {
        top: 28.096%;
        font-size: 1.75rem;
      }

      .getTips {
        @apply leading-4 mt-4;
        top: 38.831%;
        font-size: 1rem;
      }

      .convert {
        @apply text-xl bottom-5;
        width: 15rem;
        height: 3.125rem;
      }
    }

    .mores {
      @apply text-xl mt-8 mb-10;
      bottom: 20%;
    }

    .closeModal {
      @apply w-10 h-10;
    }
  }

  &.largeContent {
    .bg {
      .getScore {
        top: 28.096%;
        font-size: 2.5rem;
      }

      .getTips {
        @apply leading-4 mt-4;
        top: 38.831%;
        font-size: 1.5rem;
      }

      .convert {
        @apply bottom-10;
        width: 20rem;
        height: 3.75rem;
        font-size: 1.875rem;
      }
    }

    .mores {
      @apply text-2xl mt-10;
      margin-bottom: 4.375rem;
      bottom: 20%;
    }

    .closeModal {
      width: 3.75rem;
      height: 3.75rem;
    }
  }

  .bg {
    @apply w-auto z-2 relative;
    background-size: 100% 100%;

    .bgImg {
      @apply w-auto;
      height: 65.556vh;
      min-height: 25rem;
    }

    .getScore {
      @apply absolute left-2/4 font-bold text-white whitespace-nowrap;
      transform: translateX(-50%);
      font-family: Alimama ShuHeiTi;
    }

    .getTips {
      @apply absolute left-2/4 text-white font-semibold whitespace-nowrap;
      font-family: Alibaba PuHuiTi 2;
      transform: translateX(-50%);

      span {
        color: #fffd84;
      }
    }

    .convert {
      @apply font-semibold absolute left-2/4 overflow-hidden;
      transform: translateX(-50%);
      border-radius: 2.5rem;
      background: linear-gradient(180deg, #ffddad 0%, #fba951 100%);
      font-family: Alibaba PuHuiTi 2;
      color: #c61800;

      &::after {
        @apply absolute w-full h-full left-0 top-0 bg-transparent;
        border: 4.46px solid;
        border-image: linear-gradient(180deg, #fce8cd 0%, #f7bc7c 100%) 4.46;
        content: '';
      }
    }
  }

  .light {
    @apply absolute top-0 left-2/4 z-min-1;
    transform: translateX(-50%);
    width: 21.375rem;
    height: 21.375rem;
    animation: rotates 0.5s ease;
  }

  .mores {
    @apply font-semibold underline z-2 cursor-pointer;
    font-family: Alibaba PuHuiTi 2;
    font-variation-settings: 'opsz' auto;
    color: #999999;
  }

  .closeModal {
    @apply mx-auto cursor-pointer;
  }
}

@keyframes rotates {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
